<template>
  <div class="light-container">
    <div class="light-wrap">
    <div class="light-tips">
      温馨提示：绿色代表房间内已绑定设备，灰色代表房间未绑定设备，黄色代表房间内灯打开了
    </div>
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div class="fr">
            <el-tag
              v-for="tag in tags"
              :key="tag.name"
              :closable="selectArr.includes(tag.id)"
              :color="selectArr.includes(tag.id) ? tag.color : ''"
              size="medium"
              :class="{ active: selectArr.includes(tag.id) }"
              :data-id="tag.id"
              @click="handleFilter"
              @close="handleClose(tag.id)"
            >
              {{ tag.name }}
            </el-tag>
          </div>
        </el-col>
    </el-row>
    <el-tabs v-model="activename" type="border-card" @tab-click="handleSelectBuilding">
        <el-tab-pane v-for="(item, index) in buildingData" :key="index" :datafloorid="item.id" :name="item.name" :label="item.name">
          <el-tabs v-model="flooractivename" type="card" tab-position="left" @tab-click="handleTabFloorClick">
            <el-tab-pane v-for="(ite, idx) in floorData" :key="idx" :label="ite.name" :datafloorid="ite.id" :name="ite.name" style="min-height: 400px;">
              <div class="light-room-switch">
              <el-button v-if="adminType == 9" type="primary" icon="el-icon-zoom-in" @click="handAddArea">查看情景模式</el-button>
                <el-button type="primary" @click="handleClickAllOpen(1)">全开</el-button>
                <el-button type="danger" @click="handleClickAllOpen(2)">全关</el-button>
                <el-button type="success" @click="handleClickAllOpen(3)">睡眠</el-button>
                <el-button v-for="scene in pageSceneeData.list" :key="scene.id" type="primary" @click="handleSceneeAllOpen(scene)">{{ scene.name }}</el-button>
                <el-button v-if="adminType == 9" type="primary" @click="handleChangeArea()">更新区域</el-button>
                <el-button v-if="adminType == 9" type="primary" @click="handleChangeEquip()">更新设备</el-button>
                <el-button type="primary" @click="handleTopOpen(1, item)">更新情景-灯光全开</el-button>
                <el-button type="primary" @click="handleTopOpen(2, item)">更新情景-灯光全关</el-button>
                <el-button type="primary" @click="handleTopOpen(3, item)">更新情景-睡眠模式</el-button>
                <el-button :type="closeTitle == '关闭声音' ? 'danger' : 'primary'" @click="handleClosesy">{{ closeTitle }}</el-button>
              </div>
              <div class="light-floor-wrap">
                <el-row :gutter="20">
                  <el-col
                    v-for="(light, lidx) in pageDataList"
                    :key="lidx"
                    :xs="24"
                    :sm="12"
                    :md="6"
                    :lg="6"
                    :xl="6"
                  >
                    <el-card
                      shadow="hover"
                      :class="(light.device_list && light.device_list.length > 0) && light.light_status != 'on' ? backgroundColor[0] : light.light_status == 'on' ? backgroundColor[1] : backgroundColor[2]"
                    >
                      <div slot="header" class="header">
                        <span v-if="light.room_code == '201'">居家自理室</span>
                        <span v-else-if="light.room_code == '210'">介助介护培训室</span>
                        <span v-else-if="light.room_code == '211'">失能失智照护培训室</span>
                        <span v-else>{{ light.room_code }}房间</span>
                        <template v-if="light.device_list && light.device_list.length > 0">
                          <!-- <div class="light-bj ysx-bj-move"></div> -->
                          <el-button
                            v-if="light.room_code == '201' || light.room_code == '211' || light.room_code == '210'"
                            type="primary"
                            size="mini"
                            plain
                            class="light_button"
                            @click="deviceysxbind(light, lidx)"
                          >
                            设备列表
                          </el-button>
                          <el-button
                              v-else
                              type="primary"
                              size="mini"
                              plain
                              class="light_button"
                              @click="devicebind(light, lidx)"
                            >
                              设备列表
                          </el-button>
                        </template>
                        
                      </div>
                      <div style="width: 100%;">
                        <div class="light-room">
                          <div v-if="light.room_code == '201' || light.room_code == '210' || light.room_code == '211'" class="light-room-item">
                            <span>主控开关</span>
                            <el-button type="primary" plain @click="handleRoomOpen(light, 'on', lidx)">全开</el-button>
                            <el-button type="danger" plain @click="handleRoomOpen(light, 'off', lidx)">全关</el-button>
                          </div>
                          <div v-else class="light-room-item">
                            <span>主控开关</span>
                            <el-button type="primary" plain @click="handleRoomAllOpen(light.id, 'on', lidx)">全开</el-button>
                            <el-button type="danger" plain @click="handleRoomAllOpen(light.id, 'off', lidx)">全关</el-button>
                          </div>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      :title="deviceTitle"
      :visible.sync="dialogVisibleEq"
      width="50%"
      :before-close="closeDialogEq"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <div class="table-do">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              已绑定设备列表
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-table
              ref="table"
              :data="binddeviceListLight"
              :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                v-for="(item, index) in tableColumns"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :formatter="item.formatter"
                :filters="item.filters"
                :class-name="item.className"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
               v-if="adminType == 9"
                label="操作"
                fixed="right"
                width="240"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="success"
                    plain
                    @click="handleEdit(scope.row)"
                  >
                    编辑
                  </el-button>
                  <el-button
                    v-if="scope.row.type == 9"
                    size="mini"
                    type="danger"
                    plain
                    @click="handleView(scope.row)"
                  >
                    查看
                  </el-button>
                  <el-button
                    v-if="scope.row.type == 1 || scope.row.type == 7"
                    size="mini"
                    type="primary"
                    plain
                    @click="handleClickOpen(scope.row, 'on', scope.$index)"
                  >
                    打开
                  </el-button>
                  <el-button
                    v-if="scope.row.type == 1 || scope.row.type == 7"
                    size="mini"
                    type="danger"
                    plain
                    @click="handleClickOpen(scope.row, 'off', scope.$index)"
                  >
                    关闭
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <!-- 尉氏县 -->
    <el-dialog
      title="已设备绑定列表"
      :visible.sync="dialogVisibleysxEq"
      width="50%"
      :before-close="closeDialogEq"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <div class="table-do">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              已绑定设备列表
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-table
              ref="table"
              :data="ysxBinddeviceList"
              :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                v-for="(item, index) in ysxtableColumns"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :formatter="item.formatter"
                :filters="item.filters"
                :class-name="item.className"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
               v-if="adminType == 9"
                label="操作"
                fixed="right"
                width="220"
              >
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.type == '9'"
                    size="mini"
                    type="danger"
                    plain
                    @click="handleysxView(scope.row)"
                  >
                    查看
                  </el-button>
                  <el-button
                    v-if="scope.row.type == '1' || scope.row.type == '7'"
                    size="mini"
                    type="primary"
                    plain
                    @click="handleysxEdit(scope.row, 'on', scope.$index)"
                  >
                    打开
                  </el-button>
                  <el-button
                    v-if="scope.row.type == '1' || scope.row.type == '7'"
                    size="mini"
                    type="danger"
                    plain
                    @click="handleysxEdit(scope.row, 'off', scope.$index)"
                  >
                    关闭
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <el-dialog
      title="编辑设备名称"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <editdevi-form
        :key="key"
        :gutter="30"
        :data="formData"
        @save="save"
        @cancel="cancel"
      ></editdevi-form>
    </el-dialog>
    <el-dialog
      title="查看温湿度信息"
      :visible.sync="dialogModalVisible"
      width="20%"
      :before-close="closeModalDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div> <span>温度：</span> {{ vensiData.val1 }} ℃</div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div> <span>湿度：</span> {{ vensiData.val2 }} %</div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <el-dialog
      title="添加情景模式"
      :visible.sync="dialogAreaVisible"
      width="70%"
      :before-close="closeAreaDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <el-form
          ref="formData"
          :model="formArea"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
            <el-form-item label="情景模式名称" prop="mobile">
              <el-input v-model="formArea.model_name" placeholder="请输入情景模式名称"></el-input>
            </el-form-item>
            <app-table
              ref="dataTable"
              :page-data="pageData"
              :table-columns="tableColumnsarea"
              @current-change="handleCurrentChange"
              @handleCheckedRows="handleCheckedRows"
            >
              <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    plain
                    @click="handleAreaOpen(scope.row, 'on')"
                  >
                    开
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    plain
                    @click="handleAreaOpen(scope.row, 'off')"
                  >
                    关
                  </el-button>
                </template>
            </app-table>
        </el-form>
      <div class="form-footer">
          <el-button
            type="primary"
            class="sureBtn"
            size="medium"
            @click="saction"
          >
            提 交
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="medium"
            @click="sactioncancel"
          >
            取 消
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="情景模式列表"
      :visible.sync="dialogSceneeVisible"
      width="70%"
      :before-close="closeSceneeDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
          <el-button type="primary" class="add-scenee-button" icon="el-icon-plus" @click="handAddScenee">添加情景模式</el-button>
          <app-table
            :page-data="pageSceneeData"
            :table-columns="tableColumnScenee"
            @current-change="handleCurrentChange"
            @handleCheckedRows="handleCheckedRows"
          >
            <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="handleSceneeEdit(scope.row, 'on')"
                >
                  编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  plain
                  @click="handleSceneeDel(scope.row, 'off')"
                >
                  删除
                </el-button>
              </template>
          </app-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { publish, areaonoff, devstatus, deviceonoff, roomcontrol, iotsetmodel, updatearea, updatedevicelist, updatemodel, updateexecute, updatemodify } from "@/api/light";
  import { getBuilding, getFloor } from "@/api/building";
  import { getRoom } from "@/api/building";
  import { getList, getIotControl } from "@/api/bedList";
  import { devicebind, getdevice, devicestatus, deviceIotlog, iotscenelist, iotdevice, iotsceneedit, iotsceneexecute } from "@/api/device";
  import { mapGetters } from "vuex"
  import editdeviForm from "./components/editdevi-form";
  import mixins from '@/utils/mixins.js';
  import * as Api_ysxroom from "@/api/ysxroom";
  import appTable from "@/components/AppTable/index";
  import { tenBitTimestamp } from '@/utils'
  export default {
    name: "LightManage",
    components: { editdeviForm, appTable },
    mixins: [mixins],
    data() {
      return {
        activeName: "first",
        backgroundColor: ["colorType0", "colorType1", "colorType2"],
        floorlist: [
          {
            state: "on",
            room: "309"
          }
        ],
        key: Math.random(),
        $index: 0,
        webSocket: null,
        status: "",
        activename: "",
        flooractivename: "",
        buildingData: [],
        floorData: [],
        building_id: "",
        floor_id: "",
        dialogVisibleEq: false,
        tableColumns: [
          { prop: "code", label: "设备编号" },
          { prop: "name", label: "设备名称" },
          { prop: "type", label: "设备类型", formatter: this.genderFormatter },
          { prop: "name", label: "设备信息" },
        ],
        ysxtableColumns: [
          { prop: "area_id", label: "设备编号" },
          { prop: "name", label: "设备名称" },
          { prop: "val", label: "设备信息" },
        ],
        tableColumnsarea: [
          { prop: "code", label: "设备编号" },
          { prop: "name", label: "设备名称" },
          { prop: "type", label: "设备类型", formatter: this.genderFormatter },
          { prop: "status", label: "设备状态", formatter: this.statusFormatter },
        ],
        room_id: "",
        deviceTitle: "已设备绑定列表",
        unbinddeviceList: [],
        formData: {},
        dialogVisible: false,
        //温湿度
        dialogModalVisible: false,
        //情景模式添加
        dialogAreaVisible: false,
        pageData: {
          type: -1
        },
        currentSelectedData: [],
        page: 1,
        formArea: {
          model_name: "",
          device_list: []
        },
        deviceOnffList: [],
        //情景列表
        dialogSceneeVisible: false,
        pageSceneeData: {},
        tableColumnScenee: [
          { prop: "code", label: "情景编号" },
          { prop: "name", label: "情景名称" },
          { prop: "create_time", label: "创建时间", formatter: this.timeFormatter },
          { prop: "update_time", label: "更新时间", formatter: this.timeFormatter },
        ],
        tags: [
          { name: "绑定设备(40)", color: "#18ba39", id: 0 },
          { name: "灯光打开(30)", color: "#e0c720", id: 3 },
          { name: "未绑定设备(10)", color: "#999999", id: 1 },
        ],
        selectArr: [0, 1, 2, 3, 4, 5],
        dialogVisibleysxEq: false,
        ysxBinddeviceList: [],
      };
    },
    computed: {
      ...mapGetters({
        adminType: "user/type",
        ysxAreaList: "websocket/ysxAreaList",
        ysxLightList: "websocket/ysxLightList"
      }),
    },
    created() {
      
    },
    beforeDestroy() {},
    mounted() {
      // getIotControl().then(() => {
      //   if(typeof(WebSocket) === "undefined"){
	    //     alert("您的浏览器不支持WebSocket")
	    //     return false
	    //   }
      //   this.init();
      //   // devstatus('get', {id: '000B57FFFED2831811,000B57FFFED2772D02,000B57FFFED2831812,000B57FFFED2772D01'});
      // })
      this.getBuildingData();
      this.getiotscenelist();
      //尉氏县网关登录
      Api_ysxroom.ysxShowLogin({host_id: "40aa568e24d5"})
      // //获取区域
      // if(this.ysxAreaList.length == 0) {
      //   Api_ysxroom.ysxShowArea({host_id: "40aa568e24d5"})
      // }
    },
    destroyed() {
      //页面销毁时关闭
      // this.webSocket.onclose =  this.onclose();
    },
    methods: {
      handleFilter(e) {
        let id = e.currentTarget.dataset.id;
        console.log(id);
        if (this.selectArr.indexOf(parseInt(id)) === -1) {
          this.selectArr.push(parseInt(id));
        }
      },
      handleClose(id) {
        if (this.selectArr.indexOf(parseInt(id)) !== -1) {
          this.selectArr.splice(this.selectArr.indexOf(parseInt(id)), 1);
        }
      },
      timeFormatter(row) {
        if(row.update_time){
          return tenBitTimestamp(row.update_time)
        }
        return "";
      },
      closeSceneeDialog() {
        this.dialogSceneeVisible = false;
      },
      handAddScenee() {
        this.dialogAreaVisible = true;
        this.getiotdevice();
      },
      handleAreaOpen(row, onoff) {
        this.currentSelectedData.length && this.currentSelectedData.map(item => {
          if(item.code == row.code) {
            item.onoff = onoff;
          }
        })
      },
      handleSceneeEdit(row) {
        this.dialogAreaVisible = true;
        this.getiotscenedetail(row.id)
        this.formArea.model_name = row.name
      },
      handleSceneeDel(row) {
        this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              let param = {
                id: row.id,
              };
              iotscenelist("delete", param).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  this.getiotscenelist();
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
      },
      saction() {
        if (this.currentSelectedData.length === 0) {
          this.$message({
            message: "请选择一条您要添加的设备",
            type: "warning",
          });
          return false
        }
        let list = []
        this.currentSelectedData.length && this.currentSelectedData.map(item => {
          list.push({
            id: item.code,
            onoff: item.onoff,
            type: item.device_type
          })
        })
        Object.assign(this.formArea, {device_list: list})
        this.$refs["formData"].validate(async (valid) => {
          if (valid) {
            if (this.formArea.scene_id) {
              iotsceneedit("post", this.formArea).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                }
                this.getiotscenelist();
                this.dialogAreaVisible = false;
              });
              
            } else {
              iotsceneedit("post", this.formArea).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                }
                this.dialogAreaVisible = false;
                this.getiotscenelist();
              });
            }
          }
        });
      },
      sactioncancel() {
        this.dialogAreaVisible = false;
      },
      tableRowClassName({row}) {
        if (row.onoff == 'on' || row.onoff == 1) {
          return 'warning-row';
        } 
        return '';
      },
      //设备列表
      getiotdevice(type) {
        iotdevice("get", {page: this.page}).then(res => {
           this.pageData = Object.assign(res.data, {type: -1});
           if(type == 'on') {
              const _this = this;
            _this.currentSelectedData = [];
              setTimeout(function(){
                console.log(res.data)
                res.data?.list.length && res.data.list.map(item => {
                  _this.sceneList.length && _this.sceneList.map(ite => {
                    if(ite.device_id == item.code) {
                      _this.currentSelectedData.push(item)
                      item.onoff = ite.attr_value;
                      _this.$nextTick(() => {
                        _this.$refs.dataTable.$refs.dataTable.toggleRowSelection(item,true);
                      })
                    }
                  })
                })
                _this.formArea.scene_id = _this.sceneList.length && _this.sceneList[0].scene_id
              }, 1000)
           }
        })
      }, 
      //情景列表
      getiotscenelist(){
        iotscenelist("get").then(res => {
          this.pageSceneeData = Object.assign(res.data, {type: -1, page: 1, page_size: 10})
        })
      },
      //情景模式详情
      getiotscenedetail(id){
        iotscenelist('get', {id})
        // iotsceneexecute("get", {scene_id})
        this.getiotdevice('on')
        
      },
      closeModalDialog() {
        this.dialogModalVisible = false;
      }, 
      closeDialog() {
        this.dialogVisible = false;
      },
      closeDialogEq() {
        this.dialogVisibleEq = false;
        this.dialogVisibleysxEq = false;
      },
      save(form) {
        this.binddeviceListLight.map((item, index) => {
          if(item.code == form.code) {
            this.$set(this.binddeviceListLight[index], "name", form.name)
          }
        })
      },
      cancel() {
        this.dialogVisible = false;
      },
      handleEdit(row, index) {
        this.key = Math.random();
        this.formData = { code: row.code, name: row.name }
        this.dialogVisible = true;
      },
      statusFormatter(row) {
        let onoff = "关"
        if(row.onoff == 'on' || row.onoff == 1 || row.onoff == 'open') {
          onoff = "开"
        } else if(row.onoff == 'off' || row.onoff == 'close'){
          onoff = '关'
        }
        return onoff
      },
      ysxgenderFormatter(row) {
        if(row.obj_name) {
          return this.toGB2312(row.obj_name)
        }
      },
      genderFormatter(row) {
        let type = ""
        switch (row.type) {
          case 1:
            type = "灯"
            break;
          case 2:
            type = "SOS"
            break;
          case 3:
            type = "门禁"
            break;
          case 4:
            type = "可燃气体"
            break;
          case 5:
            type = "人体红外传感"
            break;
          case 6:
            type = "烟雾"
            break;
          case 7:
            type = "窗帘"
            break;
          case 8:
            type = "漏水检测"
            break;
          case 9:
            type = "温湿度检测"
            break;
          case 10:
            type = "安防报警"
            break;
          case 11:
            type = "床垫报警"
            break;
        }
        return type
      },
      devicebind(item, index) {
        this.room_id = item.id;
        this.dialogVisibleEq = true;
        this.roomIndex = index;
        this.$nextTick(() => {
          this.$refs.table.doLayout();
        })
        this.binddeviceListLight = item?.device_list || [];
      },
      deviceysxbind(item, index) {
        this.roomTestIndex = index;
        this.roomIndex = index;
        this.dialogVisibleysxEq = true;
        this.ysxBinddeviceList = item.device_list;
        this.$nextTick(() => {
          this.$refs.table.doLayout()
        })
      },
      handleClickOpen(item, onoff, index) {
        const _this = this;
        this.pageDataNum = false;
        deviceonoff('get', {
          onoff,
          id: item.code
        }).then(res => {
          const _this = this;
          // this.binddeviceListLight && this.binddeviceListLight.forEach(item => {
          //   if(item.code == this.lightDeviceList[0].devID) {
          //     this.$set(this.binddeviceListLight[index], "onoff", this.lightDeviceList.length && this.lightDeviceList[0].status || 'off')
          //   }
          // })
        })
      },
      handleView(row) {
        this.dialogModalVisible = true;
        devicestatus("get", {
          ids: row.code
        })
      },
      handleysxView(row) {
        this.dialogModalVisible = true;
        Api_ysxroom.ysxShowDevicestatus({host_id: "40aa568e24d5", ids: row.code})
      },
      handleysxEdit(row, onoff, index) {
        // 单个设备控制
        Api_ysxroom.ysxShowDeviceonoff({host_id: "40aa568e24d5", onoff, devcie_code: row.code, type: row.type})
      },
      handleRoomOpen(light, onoff, index) {
        this.pageDataNum = true;
        if(light.room_code == '201') {
          Api_ysxroom.ysxShowRoomcontrol({host_id: "40aa568e24d5", parent_id: "24b0ffac-5039-4c68-b350-a0abd1481831", area_id: "565c47c396204c49b8fed36841e87707", onoff})
        }
        if(light.room_code == '210') {
          Api_ysxroom.ysxShowRoomcontrol({host_id: "40aa568e24d5", parent_id: "24b0ffac-5039-4c68-b350-a0abd1481831", area_id: "0fd39fe6dfa0434fb175dc215e9bfb9f", onoff})
        }
        if(light.room_code == '211') {
          Api_ysxroom.ysxShowRoomcontrol({host_id: "40aa568e24d5", parent_id: "24b0ffac-5039-4c68-b350-a0abd1481831", area_id: "0931289f4d1f4cb08785ea97be4ca5f7", onoff})
        }
        this.roomIndex = index;
      },
      handleRoomAllOpen(room_id, onoff, index) {
        this.roomIndex = index;
        this.pageDataNum = true;
        roomcontrol('get', {
          c: 1,
          onoff,
          room_id,
        }).then(res => {
          console.log(res)
        })
      },
      handleRoomCurtain(onoff) {
        
      },
      handleChangeArea() {
        updatearea("get")
      },
      handleChangeEquip() {
        updatedevicelist("get");
      },
      handleTopOpen(type, item) {
        iotsetmodel("get", {type, building_id: item.id})
      },
      handAddArea() {
        this.dialogSceneeVisible = true;
         //设备列表
         this.getiotscenelist();
      },
      closeAreaDialog() {
        this.dialogAreaVisible = false;
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getiotdevice('on')
      },
      handleCheckedRows(rows) {
        if (rows && rows instanceof Array && rows.length > 0) {
          this.currentSelectedData = rows;
        } else {
          this.currentSelectedData = [];
        }
      },
      handleClickAllOpen(type) {
        let room_id = [];
        this.pageDataList.map(item => {
          room_id.push(item.id)
        })
        updateexecute("get",{type})
        // roomcontrol('get', {
        //   c: 1,
        //   onoff,
        //   room_id: room_id.join(","),
        // }).then(res => {
        // })
        // areaonoff('get', {
        //   parent_id: "816cd7e4-abfa-4ac4-8588-1c27109be923",
        //   area_id: "3ef374ce1ace4c18bb17b500e4eb3bdc",
        //   onoff
        // }).then(res => {
        //   console.log(res)
        // })
      },
      handleSceneeAllOpen(scene) {
        iotsceneexecute("get", { id: scene.id });
      },
     handleEditEq(row) {
        if(this.roombed_id) {
          devicebind("post", { room_id: this.room_id, bed_id: this.roombed_id, code: row.code }).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
            });
            devicebind("get", { room_id: this.room_id, bed_id: this.roombed_id }).then((data) => {
              this.binddeviceListLight = data.data?.list;
            });
            this.handleTabFloorClick(this.floor_id)
          }).catch(err => {
            console.log(err)
            this.$message({
              type: "info",
              message: "请联系管理员",
            });
          })
        } else {
          devicebind("post", { room_id: this.room_id, code: row.code }).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
            });
            devicebind("get", { room_id: this.room_id }).then((data) => {
              this.binddeviceListLight = data.data?.list;
            });
            this.handleTabFloorClick(this.floor_id)
          }).catch(err => {
            console.log(err)
            this.$message({
              type: "info",
              message: "请联系管理员",
            });
          })
        }
        
      },
      getBuildingData(data) {
        getBuilding("get", data).then((resp) => {
          if (resp.code === 200) {
            this.buildingData = resp?.data?.list.reverse() || [];
            this.building_id = this.buildingData[0].id;
            this.activename = this.buildingData[0].name;
            let params = {
              building_id: this.building_id,
            };
            if (this.building_id) this.getFloorData(params);
          }
        });
      },
      getFloorData(data) {
        getFloor("get", data).then((resp) => {
          if (resp.code === 200) {
            this.floorData = resp?.data?.list.reverse() || [];
            if(resp.data.list.length == 0) return
            this.floor_id = this.floorData[0].id;
            this.flooractivename = this.floorData[0].name;
            this.getTableData(resp.data.list[0].id);
          }
        });
      },
      getTableData(floor_id) {
        this.selectForm = {
          floor_id,
        };
        getRoom("get", this.selectForm).then((resp) => {
          if (resp.code === 200) {
            const data = resp.data && resp?.data?.list || [];
            
            data.forEach((item, index) => {
              //if(item.room_code == '211' || item.room_code == '210' || item.room_code == '201'){
                // this.ysxAreaList.forEach(ite => {
                //   //失能失智
                //   if(ite.area_id == "0931289f4d1f4cb08785ea97be4ca5f7") {
                //     item.device_list = ite.device_list;
                //     item.light_status = ite.light_status;
                //   }
                //   //居家自理
                //   if(ite.area_id == "565c47c396204c49b8fed36841e87707") {
                //     item.device_list = ite.device_list;
                //     item.light_status = ite.light_status;
                //   }
                //   //介助介护
                //   if(ite.area_id == "0fd39fe6dfa0434fb175dc215e9bfb9f") {
                //     item.device_list = ite.device_list;
                //     item.light_status = ite.light_status;
                //   } 
                // })
              //}
              if(item.room_code == '201') {
                Api_ysxroom.ysxShowDevicesfromareaname({host_id: '40aa568e24d5', area_name: "居家自理室"}).then(res => {
                  if(res.data && res.data.length > 0) {
                    let pageNum = 0;
                    res.data.map((i) => {
                      if(i.onoff == 'on') {
                        this.$set(data[index], "light_status", "on");
                        this.$set(data[index], "pageNum", ++pageNum);
                      }
                    })
                  }
                  item.device_list = res.data;
                })
              } else if(item.room_code == '210') {
                Api_ysxroom.ysxShowDevicesfromareaname({host_id: '40aa568e24d5', area_name: "介助介护培训室"}).then(res => {
                  if(res.data && res.data.length > 0) {
                    let pageNum = 0;
                    res.data.map((i) => {
                      if(i.onoff == 'on') {
                        this.$set(data[index], "light_status", "on");
                        this.$set(data[index], "pageNum", ++pageNum);
                      }
                    })
                  }
                  item.device_list = res.data;
                })
              } else if(item.room_code == '211') {
                Api_ysxroom.ysxShowDevicesfromareaname({host_id: '40aa568e24d5', area_name: "失能失智照护培训室"}).then(res => {
                  if(res.data && res.data.length > 0) {
                    let pageNum = 0;
                    res.data.map((i) => {
                      if(i.onoff == 'on') {
                        this.$set(data[index], "light_status", "on");
                        this.$set(data[index], "pageNum", ++pageNum);
                      }
                    })
                  }
                  item.device_list = res.data;
                })
              } else {
                if(item.device_list && item.device_list.length > 0) {
                  item.device_list.map((i) => {
                    if(i.onoff == 'on') {
                      this.$set(data[index], "light_status", "on");
                    }
                  })
                }
              }
              
            })
            // data.length && data.forEach(item => {
            //   //失能失智
            //   if(data.list[0].area_id == '0931289f4d1f4cb08785ea97be4ca5f7') {
            //     if(item.room_code == '211'){
            //       item.device_list = data.list;
            //       if(num != 0) {
            //         item.light_status = "on";
            //       } else {
            //         item.light_status = "off";
            //       }
            //     }
            //   }
            //   //居家自理
            //   if(data.list[0].area_id == '565c47c396204c49b8fed36841e87707') {
            //     if(item.room_code == '201'){
            //       item.device_list = data.list;
            //       if(num != 0) {
            //         item.light_status = "on";
            //       } else {
            //         item.light_status = "off";
            //       }
            //     }
            //   }
            //   //介助介护
            //   if(data.list[0].area_id == '0fd39fe6dfa0434fb175dc215e9bfb9f') {
            //     if(item.room_code == '210'){
            //       item.device_list = data.list;
            //       if(num != 0) {
            //         item.light_status = "on";
            //       } else {
            //         item.light_status = "off";
            //       }
            //     }
            //   }
            // })
            this.pageDataList = data;
            this.$forceUpdate();
          }
        });
      },
      getPageDataList() {

      },
      handleSelectBuilding(tab) {
        console.log(tab)
        let params = {
          building_id: tab.$attrs.datafloorid,
        };
        if (tab.$attrs.datafloorid) this.getFloorData(params);
      },
      handleTabFloorClick(tab) {
        this.getTableData(tab.$attrs.datafloorid)
        this.floor_id = tab.$attrs.datafloorid;
      },
    }
  };
</script>
<style lang="scss" scoped>
  .light-container{
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px;
    margin: 0;
    background: #fff;
    .add-scenee-button {
      margin-bottom: 20px;
    }
    .form-footer {
      padding-left: 100px;
    }
    .el-table{
      ::v-deep {
        .warning-row {
          background: oldlace;
        }
      }
    } 
    .fr{
      margin-bottom: 10px;
      .el-tag {
        line-height: 34px;
        color: #333;
        background: none;
        border: 1px solid #dddfe7;

        &.active {
          line-height: 36px;
          color: #fff;
          border: none;
        }
      }
      .el-tag--medium {
        height: 36px;
        font-size: 14px;
        cursor: pointer;

        ::v-deep {
          .el-tag__close {
            color: #fff;
          }
        }
      }
    }
    .dialog-main {
      .table-do {
        margin-bottom: 15px;
      }

      ::v-deep {
        th {
          .cell {
            color: #fff;
          }
        }
      }
    }
    .light-wrap{
      padding: 30px;
      border: 1px solid #e4e7ed;
      .light-tips{
        text-align: right;
        color: #999;
        margin-bottom: 10px;
      }
    }
    .light-room-switch{
      box-sizing: border-box;
      button{
        margin: 0 5px 10px;
      }
    }
   .light-floor-wrap{
     margin-bottom: 10px;
     .el-card.colorType0 {
       ::v-deep {
         .el-card__header {
          background: #18ba39;
         }
       }
     }
     .el-card.colorType1 {
       ::v-deep {
         .el-card__header {
           background: #e0c720;
         }
       }
     }
     .el-card.colorType2 {
       ::v-deep {
         .el-card__header {
           background: #999;
         }
       }
     }
     .el-card {
       cursor: pointer;
       border-radius: 4px;

       ::v-deep {
         .el-card__header {
           height: 44x;
           padding: 0 12px;
           line-height: 44px;
           background: #18ba39;
         }

         .el-card__body {
           box-sizing: border-box;
           padding: 12px;

           .num,
           .type,
           .price {
             margin-bottom: 12px;
             font-size: 16px;
             line-height: 24px;
             color: #333;
           }

           .price {
             color: #ff4d50;
           }

           .status {
             display: flex;
             line-height: 24px;

             span {
               flex: 1;
               color: #1791ff;
             }
           }
         }
       }
     }

     .header {
       position: relative;
       display: flex;
       align-items: center;
       color: #fff;
       .light_button{
         padding: 5px 6px;
       }

       .light-bj{
          display: inline-block;
          // position: absolute;
          // right: 70px;
          // top: 6px;
          margin-right: 10px;
          margin-top: -4px;
          width: 28px;
          height: 28px;
          background: url("../../assets/images/bj-hui.png") no-repeat;
          background-size: 28px 28px;
          background-position: center;
       }
        
       span {
         flex: 1;
         font-size: 18px;
         text-align: center;

         &:first-child {
           text-align: left;
         }

         i {
           font-size: 12px;
           font-style: normal;
           color: rgba($color: #fff, $alpha: 0.5);
         }
       }
     }
     .light-room{
        .light-room-item{
          margin-top: 5px;
          span{
            display: inline-block;
            width: 60px;
          }
        }
     }
   }
  }
  //报警闪烁
.ysx-bj-move{
  // animation: ysxbjmove 5s;
  // -webkit-animation: myFour 5s; 
  // animation-fill-mode:forwards;
  // -webkit-animation-fill-mode:forwards;
  // animation-timing-function:linear;
  // -webkit-animation-timing-function:linear;
  animation: ysxbjmove 0.02s 0s ease-in infinite alternate;
  -webkit-animation: ysxbjmove 0.02s 0s ease-in infinite alternate;
}
@keyframes ysxbjmove
{
    from {
      background-image: url("../../assets/images/bj-hui.png");
    }
    to {
      background-image: url("../../assets/images/bj-liang.png");
    }
}
 
@-webkit-keyframes ysxbjmove
{
    from {
      background-image: url("../../assets/images/bj-hui.png");
    }
    to {
      background-image: url("../../assets/images/bj-liang.png");
    }
}
</style>
